import Base from "../base.js"
// import GradlesApi from "../../api/gradles.js"
import MoviesAdd from "../../api/movies.js"
const movieProst = [

    {
        name: "电影名",
        key: "cname"
    },
    {
        name: "电影英文名",
        key: "ename"
    },
    {
        name: "电影的类型",
        key: "type"
    },
    {
        name: "电影首映地区",
        key: "area"
    },

    {
        name: "电影时长",
        key: "time"
    },
    {
        name: "电影大陆上映时间",
        key: "upDate"
    },
    {
        name: "电影评分",
        key: "score"
    },
    {
        name: "电影票房",
        key: "count"
    },
    {
        name: "剧情简介",
        key: "intro"
    },
    {
        name: "是否是经典",
        key: "isClassic"
    },
    {
        name: "导演名字",
        key: "director"
    },
    {
        name: "演员名字",
        key: "actor"
    },

];
export default class extends Base {
    constructor(props) {
        super(props);
        // console.log(props);
        this._id = props._id;
        this.data = {
            movie: {

            },
        };
    };
    render() {
        // console.log(this.data.movie.movie)
        // const movie=this.data;
        this.$el.html(`
       <div>
       <h1 style="text-align:center">电影信息修改</h1>
        <table >
            <tbody>
            ${movieProst.map(item => {
            if (item.key === "isClassic") {
                return `
                    <div class="layui-form-item" style="padding: 10px;width:400px;margin:auto;margin-left:420px">
                    <label class="layui-form-label" style="width:190px">${item.name}</label>
                    <div class="layui-input-block">
                    <select  name="isClassic" lay-verify="required" class="isClassic" style="width:190px;height:36px;outline:none;border:1px solid #eeeeee">
                    <option value="false">否</option><option value="ture">是</option>
                    </select>
                    </div>
                </div>
                    `
            };
            return `
                    <div class="layui-form-item" style="padding: 10px;width:400px;margin:auto;margin-left:420px">
                    <label class="layui-form-label" style="width:190px">${item.name}</label>
                    <div class="layui-input-block">
                    <input type="text" style="width:190px" value="${this.data.movie[item.key]}" name="${item.key}" required  lay-verify="required" placeholder="请输入${item.name}" autocomplete="off" class="layui-input" >
                    </div>
                </div>
                
                `
        }).join("")}
                <tr>
                <td style="width:650px"></td>
                <td><button id="change-btn" class="save-btn layui-btn layui-btn-lg layui-btn">保存</button></td>
                </tr>
                </tbody>
            </table>
        </div>
        `);
        this.$isClassic=$(".isClassic")
        this.$change = $("#change-btn")
    }
    async getOne() {
        const { _id } = this.data.movie;
        this.data.movie = await movieAdd.getOne(_id);
        //  console.log(data);
    }
    async change() {

        const {_id, cname, ename, type, time, upDate, score,area, count, intro, isClassic, director, actor, } = this.data.movie;
        console.log(this.data.movie);
        await MoviesAdd.change({ _id,cname, ename, type, time,area, upDate, score, count, intro, isClassic, director, actor, })
        location.hash = "#/info/movies";
    }

    handl() {
        console.log(1);
       _.map(movieProst, v => {
            if (v.key == "isClassic") {
                this.$isClassic.on("change", e => {
                    // student[v.key] = e.target.value;
                    this.data.movie[v.key] = e.target.value;

                })
            } else {
                $(`input[name=${v.key}]`).on("input", e => {
                    this.data.movie[v.key] = e.target.value;
                })
            }
        })
        this.$change.on("click", this.change.bind(this));

    };
    // 重新渲染  数据渲染到表格
    rerender() {
        const { movie } = this.data;
        // lodash遍历对象，添加学生信息
        _.map(movie, (v, k) => {
            if (k == "images" && k == "_id") {
                return;
            } else {
                $(`input[name=${k}]`).val(movie[k]);
            }
        });


    }
    async mounted() {
        this.data.movie = await MoviesAdd.findOne(this._id);
        // // 获取班级的值
        // 拿到数据渲染
       
        this.rerender();
        this.handl();

    }
}